import React from 'react'
import { Button, Layout, Avatar, Dropdown } from 'antd'
import './index.css'
import { MenuFoldOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { CollapseMenu } from '../../store/reducers/tab'
import { useNavigate } from 'react-router-dom'
const { Header } = Layout
const CommonHeader = ({ collapsed }) => {
  const navigate = useNavigate()
  const logout = () => {
    // 清除token 
    localStorage.removeItem('token')
    navigate('/login')
    console.log('退出')
  }
  const items = [
    {
      key: '1',
      label: <div rel="noopener noreferrer">个人中心</div>
    },
    {
      key: '2',
      label: (
        <div onClick={logout} rel="noopener noreferrer">
          退出
        </div>
      )
    }
  ]
  // 创建dispatch
  const dispatch = useDispatch()
  // 点击展开收起按钮
  const setCollapsed = () => {
    dispatch(CollapseMenu()) // 切换状态
  }
  return (
    <Header className="header-comtainer">
      <Button
        type="text"
        icon={<MenuFoldOutlined />}
        style={{
          fontSize: '16px',
          width: 64,
          height: 32,
          background: '#fff'
        }}
        onClick={() => {
          setCollapsed()
        }}
      />
      <Dropdown
        menu={{
          items
        }}
        placement="bottom"
      >
        <Avatar
          size={36}
          src={
            <img src={require('../../assets/images/user.png')} alt="avatar" />
          }
        />
      </Dropdown>
    </Header>
  )
}

export default CommonHeader
